/* 有弹窗的页面的新增，编辑表单逻辑
 * dependence
 * 需要提供表单model - addEditForm, afterSubmitSuccess - 提交成功后的操作
 * 如果有编辑，需要提供editDataHandler - 编辑数据转换为表单数据
-------------------------- */
const formAddEditMixin = {
  data () {
    return {
      isEditing: false // 是否处于编辑状态
    }
  },
  props: {
    editData: Object // 编辑时原来的数据
  },
  computed: {
    // 新增 or 编辑
    type () { return this.isEditing ? '编辑' : '新增' }
  },
  watch: {
    editData: {
      immediate: true,
      deep: true,
      handler (v) {
        // 如果editData存在，进入编辑模式
        if (v && Object.keys(v).length) {
          this.isEditing = true
          this.editDataHandler(v) // 编辑数据处理
        }
      }
    }
  },
  methods: {
    // 提交表单
    submitForm () {
      this.$refs.addEditForm.validate((valid) => {
        if (!valid) return false
        this.AsyncLoading('确定', this.addOrEditApi)
      })
    },
    // 重置数据
    resetForm () {
      this.$refs.addEditForm.resetFields()
    },
    beforeSubmit () {},
    // 添加(编辑)数据接口
    async addOrEditApi () {
      await this.beforeSubmit()
      const Api = this.isEditing ? this.currentEditApi : this.currentAddApi
      const [ err ] = await Api()
      if (err) return this.$message.error(err.message || `${this.type}失败`)
      this.$message.success(`${this.type}成功`)
      this.isEditing = false
      this.resetForm()
      this.afterSubmitSuccess()
    }
  }
}

export default formAddEditMixin
